<template>
    <div class="common-layout">
        <el-container>
            <el-header style="display: flex; justify-content: center;">
                <div style="width: 20%; text-align: center; line-height: 60px; background-color: brown; font-size: larger ; font-weight: bolder; color: white;">
                    修改个人信息
                </div>
            </el-header>
            <el-main style="display: flex; flex-direction: column; align-items: center; height: 100%; margin-top: 40px;">
                <el-form class="el-form" label-width="80px" :model="userInfo" :rules="rules">
                    <el-form-item label="用户名">
                        <el-input
                        v-model="userInfo.name"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                        v-model="userInfo.password"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-input
                        v-model="userInfo.gender"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="telephone">
                        <el-input
                        v-model="userInfo.telephone"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="identity">
                        <el-input
                        v-model="userInfo.identity"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer style="display: flex; justify-content: center; margin-top: 40px;">
                <div style="width: 40%; display: flex; justify-content: space-between;">
                    <el-button style="background-color: brown; color: white; width: 150px;" @click="goSubmit">提交</el-button>
                    <el-button style="background-color: brown; color: white; width: 150px;" @click="goBack">返回</el-button>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import request from "@/utils/request";
import { ElMessage } from 'element-plus'; 
import { useRouter } from 'vue-router'
const router = useRouter();

const userInfo = ref({
    name: '',
    password: '',
    gender: '',
    telephone: '',
    identity: ''
});

const rules = {
    password: { 
        pattern:/^\S{3,10}$/,
        message:'密码必须是3-10位',
        trigger:'change'
    },
    gender: {
        pattern: /^(男|女)$/,
        message:'请输入正确的性别',
        trigger:'change'
    },
    phone: {
        pattern: /^1[3456789]\d{9}$/,
        message:'请输入正确的11位手机号码',
        trigger:'change'
    },
    identity: {
        pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
        message:'请输入正确的身份证号码',
        trigger:'change'
    }
}

const getInfo = async() => {
    try {
        const userData = localStorage.getItem('admin');
        const parseData = JSON.parse(userData);
        const uid = parseData.id;
        const res = await request.get('/user/find', {
            params: {
                id: uid
            }
        });
        if(res.code === '0') {
            userInfo.value = res.data
        }
    } catch (error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
}

onBeforeMount(async() => {
    await getInfo();
});

const goSubmit = async() => {
    try {
        const userData = localStorage.getItem('admin');
        const parseData = JSON.parse(userData);
        const uid = parseData.id;
        const res = await request.post('/user/update', {
            id: uid,
            newUser: userInfo.value
        });
        if(res.code === '0') {
            ElMessage({
                message: '修改成功',
                type: 'success'
            });
        }
    } catch (error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
};

const goBack = () => {
    router.push('/user/userInfo');
};
</script>

<style lang="less" scoped>

</style>